<template>
    <div class="allorder">
            <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
            <p>
                <van-search placeholder="搜索我的订单" @click="$router.push('/Ordersearch')"
                    @keydown.enter="searchorder()" /><van-icon name="service-o" class="service"
                    @click="$router.push('/Customerservice')" />
            </p>
            <van-tabs v-model="active" title-active-color="#00ba5d" color="#00ba5d">

                <van-tab title="全部">
                    <template v-for="item in orderlist">
                        <template v-if="item.statusId">
                            <van-card :num="item.productSum" :price="item.productPrice" :title="item.productTitle"
                                :thumb="item.orderImg"
                                @click="$router.push({ path: '/Orderdetails', query: { orderid: item.orderId } })">

                            </van-card>
                        </template>
                    </template>
                </van-tab>
                <van-tab title="待付款">
                    <template v-for="item in orderlist" v-if="item.statusId == 1">
                        <van-card :num="item.productSum" :price="item.productPrice" :title="item.productTitle"
                            :thumb="item.orderImg"
                            @click="$router.push({ path: '/Orderdetails', query: { orderid: item.orderId } })">
                        </van-card>
                    </template>
                </van-tab>
                <van-tab title="待配送">
                    <template v-for="item in orderlist" v-if="item.statusId == 2">
                        <van-card :num="item.productSum" :price="item.productPrice" :title="item.productTitle"
                            :thumb="item.orderImg"
                            @click="$router.push({ path: '/Orderdetails', query: { orderid: item.orderId } })">
                        </van-card>
                    </template>
                </van-tab>
                <van-tab title="待收货">
                    <template v-for="item in orderlist" v-if="item.statusId == 3">
                        <van-card :num="item.productSum" :price="item.productPrice" :title="item.productTitle"
                            :thumb="item.orderImg"
                            @click="$router.push({ path: '/Orderdetails', query: { orderid: item.orderId } })">
                        </van-card>
                    </template>
                </van-tab>
                <van-tab title="待评价">
                    <template v-for="item in orderlist" v-if="item.statusId == 4">
                        <van-card :num="item.productSum" :price="item.productPrice" :title="item.productTitle"
                            :thumb="item.orderImg"
                            @click="$router.push({ path: '/Orderdetails', query: { orderid: item.orderId } })">

                        </van-card>
                    </template>
                </van-tab>
            </van-tabs>
        <Poeval :show="shows"></Poeval>
    </div>
</template>

<script>
import orders from '@/api/orders';
import Poeval from './evaluate.vue'
export default {
    components: {
        Poeval
    },
    data() {
        return {
            active: 0,
            orderlist: [],
            shows: { show: false, }

        };
    },
    mounted() {
        this.getOrderList()
        // console.log(this.$route.query);
        this.active = Number(this.$route.query.active);
    },
    methods: {
        async getOrderList() {
            let res = await orders.getOrderList()
            console.log(res);
            this.orderlist = res.data;
        }
    },

}
</script>

<style lang="scss" scoped>
.allorder {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 52px;
        
        .van-search {
            width: 90%;

            .van-cell .van-cell--borderless .van-field {
                background-color: #f2f2f2
            }
        }

        .service {
            font-size: 30px;
            margin-right: 5px
        }
    }
    .van-tabs{
        flex: 1;
        overflow: scroll;
    }
    .van-tabs__wrap {
        color: #00ba5d;
    }
    .van-tabs__content{
        overflow: scroll;
    }

    .van-tabs__line {
        background-color: #00ba5d;
    }
}
</style>